<template>
  <!-- 精选 -->
  <div class="index">
    <!-- 搜索 -->
    <van-search
      v-model="value"
      placeholder="点击前往搜索"
      @focus="onSearch"
      to="/search"
    />
    <!-- 轮播banner -->
    <van-swipe class="my-swipe" :autoplay="3000">
      <van-swipe-item v-for="(image, index) in banner" :key="index">
        <img :src="image.url" />
      </van-swipe-item>
    </van-swipe>
    <!-- Grid宫格 -->
    <van-grid :column-num="6">
      <van-grid-item
        v-for="item in channel"
        :key="item.id"
        :icon="item.iconUrl"
        :text="item.name"
        :to="'/ulList?id=' + item.id"
      />
    </van-grid>
    <!-- 优惠卷 -->
    <van-coupon-list
      v-if="isShow"
      :coupons="coupons"
      :list-footer="false"
      :show-exchange-bar="false"
      :disabled-list-footer="false"
      :show-close-button="false"
      :editable="false"
      currency="¥"
      style="height: 350px"
      @change="onChange"
    />
    <!-- 团购专区 -->
    <van-cell
      title="团购专区"
      is-link
      value="更多团购商品"
      to="GroupBuyingArea"
    />
    <!-- 品牌商直供 -->
    <van-cell title="品牌商直供" is-link value="更多品牌商" to="directSupply" />
    <van-grid :column-num="2">
      <van-grid-item
        v-for="value in directSupply"
        :key="value.id"
        :to="'/sonDirectSupply?id=' + value.id"
      >
        <img :src="value.picUrl" alt="" style="width: 150px" />
        <span>{{ value.name }}</span>
      </van-grid-item>
    </van-grid>
    <!-- 新品首发 -->
    <van-cell
      title="新品首发"
      is-link
      value="更多新品首发"
      to="firstPublish"
      @click="saveScrollPosition"
    />
    <van-grid :column-num="2">
      <van-grid-item
        v-for="value in firstPublish"
        :key="value.id"
        :to="'/sonFirstPublish?id=' + value.id"
      >
        <img :src="value.picUrl" alt="" style="width: 150px" />
        <span>{{ value.name }}</span>
      </van-grid-item>
    </van-grid>
    <!-- 人气推荐 -->
    <van-cell title="人气推荐" is-link value="更多人气推荐" to="recommend" />
    <van-card
      v-for="item in recommend"
      :key="item.id"
      :price="item.retailPrice"
      :title="item.name"
      :thumb="item.picUrl"
      @click="clickRecommend(item.id)"
    />
    <!-- 专题精选 -->
    <van-cell title="专题精选" is-link value="更多专题精选" to="choiceness" />
    <van-grid :column-num="2">
      <van-grid-item
        v-for="(value, index) in choiceness"
        :key="value.id"
        @click="goNweChoiceness(index, value.id)"
      >
        <img :src="value.picUrl" alt="" style="width: 150px" />
        <span style="font-size: 14px; color: rgb(171, 149, 109)">{{
          value.title
        }}</span>
        <span style="font-size: 14px; color: rgb(171, 149, 109)">{{
          value.subtitle
        }}</span>
      </van-grid-item>
    </van-grid>
  </div>
</template>

<script>
// 请求数据
import { homeIndex } from '../../api/home'
export default {
  name: 'index',
  components: {},
  data () {
    return {
      value: '',
      // 轮播
      banner: '',
      // Grid宫格
      channel: '',
      // 优惠卷
      coupons: [
        {
          available: 1,
          condition: '',
          name: '',
          customValidPeriod: '无限有效期：10天',
          valueDesc: null,
          unitDesc: '元'
        },
        {
          available: 1,
          condition: '',
          name: '',
          customValidPeriod: '无限有效期：10天',
          valueDesc: null,
          unitDesc: '元'
        }
      ],
      isShow: true,
      chosenCoupon: -1,
      // 品牌商直供
      directSupply: '',
      // 新品首发
      firstPublish: '',
      // 人气推荐
      recommend: '',
      // 专题精选
      choiceness: ''
    }
  },
  // 计算属性
  computed: {},
  watch: {},
  mounted () {
    this.requestData()
  },
  methods: {
    // 搜索事件
    onSearch (val) {
      this.$router.push('/search')
    },
    // 请求
    requestData () {
      // 发起请求
      homeIndex().then((res) => {
        const { data } = res.data
        // 轮播
        this.banner = data.banner
        // Grid宫格
        this.channel = data.channel
        // 优惠卷
        const {
          data: { couponList }
        } = res.data
        // console.log(data)
        if (couponList.length > 0) {
          this.coupons[0].name = couponList[0].name
          this.coupons[1].name = couponList[1].name
          this.coupons[0].condition = couponList[0].desc
          this.coupons[1].condition = couponList[1].desc
          this.coupons[0].valueDesc = couponList[0].discount
          this.coupons[1].valueDesc = couponList[1].discount
          this.isShow = true
        } else {
          this.isShow = false
        }
        // 品牌商直供
        this.directSupply = data.brandList
        // 新品首发
        this.firstPublish = data.hotGoodsList
        // 人气推荐
        this.recommend = data.newGoodsList
        // 专题精选
        this.choiceness = data.topicList
        // console.log(data.channel)
      })
    },
    // 人气推荐点击事件
    clickRecommend (id) {
      this.$router.push('/sonFirstPublish?id=' + id)
    },
    // 专题精选路由跳转
    goNweChoiceness (index, id) {
      this.$router.push({
        name: 'sonChoiceness',
        params: { id: id, index: index }
      })
    },
    // 优惠卷
    onChange (index) {
      // 在全局注册使用
      this.$login('/car')
    },
    // 保存滚动的位置
    saveScrollPosition () {
      // const scrollPosition = window.scrollY
      // localStorage.setItem('scrollPosition', scrollPosition)
      // console.log('滚动位置已保存：', scrollPosition)
    }
  }
}
</script>

<style lang="scss" scoped>
.index {
  // 轮播图
  .my-swipe {
    .van-swipe-item {
      color: #fff;
      font-size: 20px;
      text-align: center;
      img {
        width: 100%;
      }
    }
  }
}
</style>
